<template>
  <el-form-item v-if="list.length" prop="goodsEntities" :rules="rules">
     <div class="prize-list">
       <div class="tabs">
         <el-tabs v-model:model-value="tabModelValue" @tab-change="handleChange">
           <el-tab-pane v-for="(item, index) in list" :key="index" :name="'' + index">
             <template #label>
               奖品{{toChineseNumber(index + 1)}}
             </template>
           </el-tab-pane>
         </el-tabs>
       </div>

       <div class="op-button">
         <el-button @click="clickDelete">
           <el-icon><Minus/></el-icon>
         </el-button>
         <el-button type="primary" @click="clickAdd">
           <el-icon><Plus/></el-icon>
         </el-button>
       </div>
     </div>
  </el-form-item>

  <el-form-item v-else required label=" " prop="goodsEntities" :rules="rules">
    <el-button type="primary" @click="clickStartAdd">添加奖品</el-button>
  </el-form-item>
</template>

<script lang="ts" setup>
import {WritableComputedRef} from "vue";
import { toChineseNumber } from "@/utils"

const props = withDefaults(defineProps<{
  modelValue: string,
  list: any // TODO 接口定义完成后，引入goodsEntities的类型
}>(), {
  modelValue: '-1',
  list: [], // TODO 接口定义完成后，引入goodsEntities的类型
})
const emits = defineEmits<{
  (e: 'update:model-value', value:  string): void,
  (e: 'tab-change', index: string): void,
  (e: 'click-add', currentItem: any, currentIndex: number, goodsEntities: []): void, // TODO goodsEntities类型
  (e: 'click-delete', currentItem: any, currentIndex: number, goodsEntities: []): void // TODO goodsEntities类型
}>()

// name 的绑定值会被组件转成string
const tabModelValue:WritableComputedRef<string> = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emits('update:model-value', newValue)
  },
})

const handleChange = (index: string) => {
  emits('tab-change', index)
}

const clickStartAdd = () => {
  emits('click-add', null, Number('-1'), props.list)
}

const clickAdd = (index: string) => {
  emits('click-add', props.list[Number(index)], Number(index), props.list)
}

const clickDelete = (index: string) => {
  emits('click-delete', props.list[Number(props.modelValue)], Number(props.modelValue), props.list)
}

const rules = [{
  required: true,
  validator(rule: any, value: any, callback: any) {
    if (!props.list.length) {
      callback('请添加奖品')
    } else {
      callback()
    }
  }
}]
</script>

<style scoped lang="scss">
.prize-list {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

:deep(.el-tabs__header) {
  margin: 0 0;
}

.op-button {
  margin-left: 12px;
}
</style>
